<!--
Vue：v-on
> 目标: 掌握v-on事件指令的使用

- 语法: @click=”函数名()”  @html元素的事件名把前面的on去掉
- 说明: 过时写法：v-on:click=”函数名()” 在Vue.js 1.x版本中使用(2.x版本中推荐使用@click)
**常用事件指令:**
- @click：单击事件
- @blur：失去焦点事件
- @keyup：键盘按键按下并松开
- @focus：获取焦点事件
- @change：对应onchange改变事件
- @keydown：键盘按键按下事件
- @keypress：同上
- @mousedown：鼠标按下事件
- @mouseup：鼠标按下弹起
- @mouseenter：鼠标进入事件
- @mouseleave：鼠标离开事件
- @mouseover：鼠标进入事件
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs事件绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    v-model.number : 指定x变量的数据类型-->
    x值：<input type="text" v-model.number="x" @keyup="keyup()"/><br/>
    y值：<input type="text" v-model.number="y" @blur="blur()"/><br/>
    <input type="button" @click="calc()" value="计算一"/>
    <!--
          @事件名 这种方式绑定事件在Vue2.0推荐使用
          过时的事件绑定(了解 1.x版本)
          v-on:事件名 已放弃
        -->
    <input type="button" v-no:click="calc()" value="计算二"/>
    <hr/>
    {{count}}
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app', // 渲染的html元素
        data: { // 数据对象(必须先定义，才能使用)
            x: '',
            y: '',
            count: ''
        },
        methods: { // 事件方法
            calc() {
                this.count = this.x + this.y;
            },
            keyup() {
                alert(this.x);
            },
            blur() {
                alert(this.y);
            }
        }
    });
</script>
</body>
</html>